<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>02-着色器</title>
		<style type="text/css">
			body {
				margin: 0;
				overflow: hidden;
			}
			#canvas {
				background-color: antiquewhite;
			}
		</style>
	</head>
	<body>
		<canvas id="canvas"></canvas>
		<!-- glsl es 语言 -->
		<!-- 顶点着色器 -->
		<script id="vertexShader" type="x-shader/x-vertex">
			void main() {
				// 点位 x y z 一个顶点到相机的距离
				gl_Position = vec4(-0.5,0,0,1.0);
				// 尺寸
				gl_PointSize = 100.0;
			}
		</script>
		<!-- 片元着色器 -->
		<script id="fragmentShader" type="x-shader/x-fragment">
			void main() {
				gl_FragColor = vec4(1,1,0,1);
			}
		</script>
		<script type="text/javascript">
			const canvas = document.querySelector("#canvas");
			canvas.width = window.innerWidth;
			canvas.height = window.innerHeight;
			
			const vsSource = document.querySelector("#vertexShader").innerText;
			const fsSource = document.querySelector("#fragmentShader").innerText;
			
			const gl = canvas.getContext("webgl");
			gl.clearColor(0, 0, 0, 1);
			gl.clear(gl.COLOR_BUFFER_BIT);
			
			// 初始化着色器
			// 功能：解析着色器文本，整合到程序对象里,关联webgl上下文对象，实现两种语言的
			initShaders(gl, vsSource, fsSource);
			
			// 绘制顶点
			gl.drawArrays(gl.POINTS, 0, 1);
			
			// 跨语言调用
			function initShaders(gl,vsSource,fsSource) {
				//创建程序对象
				const program = gl.createProgram();
				//建立着色对象
				const vertexshader = loadShader(gl, gl.VERTEX_SHADER, vsSource);
				const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);
				//把顶点着色对象装进程序对象中
				gl.attachShader(program, vertexshader);
				//把片元着色对象装进程序对象中
				gl.attachShader(program, fragmentShader)
				//连接webg1上下文对象和程序对象
				gl.linkProgram(program);
				//启动程序对象
				gl.useProgram(program);
				//将程对象挂到上下文对象上
				gl.program=program;
				return true;
			}
			
			function loadShader(gl, type, source){
				//根据着色类型，建立着色器对象
				const shader = gl.createShader(type);
				//将着色器源文件传入着色器对象中
				gl.shaderSource(shader,source);
				//编译着色器对象
				gl.compileShader(shader);
				//返回着色器对象
				return shader;
			}
		</script>
	</body>
</html>